<!--suppress ALL -->
<template>
  <div>

    <div style="background-color: white; margin-top:30px; padding-top:15px; float: left">
      <ol v-for="el in data.contents" style="list-style:none; float:left">
        <li>
          <div style="width: 160px; height: 240px">
            <img :src=el.post
                 style="width: 160px; height: 220px" @click="filmDetail(el.id)">
            <div>
              <div
                style="font-size:12px;width: 150px;overflow:auto">{{ el.title }}
              </div>
            </div>
          </div>
        </li>
      </ol>
    </div>
    <DialogFormCpt :dialog-visible="showDialog" :title="title" @close="closeDialog">
      <ul class="infinite-list" v-infinite-scroll="load"
          style="overflow:auto;list-style:none; height: 600px;">
        <li v-for="el in this.comments" class="infinite-list-item">
          <div style="float: left;margin-top: 5px">
            <div style=" font-size:12px;text-align:left;">{{ el.name }} &nbsp&nbsp&nbsp {{ el.date }}
              &nbsp&nbsp&nbsp {{ el.likes }}
            </div>
            <div style="float: left">
              <div style="float: left; width: 100px; height: 70px; margin-top: 12px;">
                <img
                  src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2571585094.jpg" height="50px"
                  width="50px"/>
              </div>
              <div style=" text-align:left;margin-top: 12px; margin-left: 100px; width: 500px">
                {{ el.content }}
              </div>
            </div>
          </div>
        </li>
      </ul>

    </DialogFormCpt>
    <span v-if=true
          style="float: right; position:relative;margin-bottom:20px;right:20px">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total=this.data.total
        :page-size="16"
        small="true"
      >
      </el-pagination>
    </span>
  </div>
</template>

<script>
import {url} from '../../../common/Common'
import {get, getSingle} from '../../../components/HttpUtil'
import DialogFormCpt from '../../../components/DialogFormCpt'

export default {
  name: 'FilmPicPage',
  components: {DialogFormCpt},
  data() {
    return {
      data: {},
      filmListUrl: url.film.film.list,
      filmDetailUrl: url.film.film.one,
      currentPage: 1,
      pageSize: 16,
      title: '电影详情',
      showDialog: false,
      detail: {},
      comments: [],
      count: 0,
      filmCommentsUrl: url.film.comment.list,
      commentSize: 10,
      commentPage: 0,
      current: 1
    }
  },
  methods: {
    gainList: function () {
      var url = this.filmListUrl + '?size=' + this.pageSize + '&page=' + this.currentPage
      get(url, this.$store.state.token)
        .then(res => {
          this.data = res.data
        })
        .catch(e => {
          console.log(e)
        })
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.gainList()
    },
    filmDetail(val) {
      console.log('val' + val)
      console.log('current' + this.current)

      if (val != this.current) {
        this.comments = []
        this.commentPage = 1
      }
      this.showDialog = true
      this.current = val

      getSingle(this.filmDetailUrl + '/' + val, this.$store.state.token)
        .then(res => {
          this.detail = res.data
        })
        .catch(e => {
          console.log(e)
        })
      this.freshComments(val)
    },

    freshComments(val) {

      get(this.filmCommentsUrl + '/' + val + '?size=' + this.commentSize + '&page=' + this.commentPage,
        this.$store.state.token)
        .then(res => {
          this.comments = this.comments.concat(res.data.contents)
          console.log(this.comments)
        })
        .catch(e => {
          console.log(e)
        })
    },

    load() {
      this.commentPage += 1
      console.log('commentPage' + this.commentPage)
      this.freshComments(this.current)

    },
    closeDialog(data) {
      this.showDialog = data
    }

  },

  created: function () {
    this.gainList()
  }
}


</script>


<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
